<template>
  <div>
    <div class="mainInput">
      <input type="text" placeholder="接下去要做什么?" @keyup.enter="onSubmit" v-model="val">
    </div>
    <div>
      <div :class="{suibian: todo.state}" v-for='(todo, index) in data3' :key="index">
        <inputList :chuanzhi='todo.state' :val1='todo.content' :wei='index' v-on:childByValue="childByValue"></inputList>
      </div>
    </div>
    <div class="mainTabs">
      <div class="left">{{totalMarks}} items left</div>
      <div class="center">
        <span class="all" @click="quan()" :class="{actived: isAll}">all</span>
        <span class="active" @click="weixuan()" :class="{actived: isActive}">active</span>
        <span class="completed" @click="xuan()" :class="{actived: isCompleted}">completed</span>
      </div>
      <div class="right">
        <button @click="shanchu()">clear Completed</button>
      </div>
    </div>
  </div>
</template>

<script>
import inputList from '@/components/inputList.vue'
export default {
  data () {
    return {
      val: '',
      data1: [],
      data3: [],
      isAll: true,
      isActive: '',
      isCompleted: ''
    }
  },
  components: {
    inputList
  },
  computed: {
    totalMarks () {
      let total = this.data1.length
      for (var i = 0; i < this.data1.length; i++) {
        if (this.data1[i].state === true) {
          total--
        }
      }
      return total
    }
  },
  methods: {
    onSubmit () {
      if (this.val !== '') {
        this.data1.push({ state: false, content: this.val })
        this.data3 = this.data1
        this.val = ''
      }
    },
    childByValue (weizhi) {
      this.data3.splice(weizhi, 1)
    },
    shanchu () {
      let data2 = []
      data2 = this.data1
      let fun1 = function (d) {
        for (var i = 0; i < d.length; i++) {
          if (d[i].state === true) {
            d.splice(i, 1)
            fun1(d)
          }
        }
      }
      fun1(data2)
      this.data3 = data2
    },
    quan () {
      this.isAll = true
      this.isActive = false
      this.isCompleted = false
      this.data3 = this.data1
    },
    weixuan () {
      this.data3 = []
      this.isAll = false
      this.isActive = true
      this.isCompleted = false
      for (var i = 0; i < this.data1.length; i++) {
        if (this.data1[i].state === false) {
          this.data3.push(this.data1[i])
        }
      }
    },
    xuan () {
      this.isAll = false
      this.isActive = false
      this.isCompleted = true
      this.data3 = []
      for (var i = 0; i < this.data1.length; i++) {
        if (this.data1[i].state === true) {
          this.data3.push(this.data1[i])
        }
      }
    }
  }
}
</script>

<style>
.mainInput{
  background-color: #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 30px 50px;
  width: 80%;
  margin: 0 auto;
}
</style>
